<template>
    <!-- {{ arr }}
    {{ copyArr }} -->
    <button @click="change">change</button>
    <hr />
    {{ hobby }}
</template>

<script setup lang="ts">
import { ref,reactive,readonly,shallowReactive,triggerRef } from 'vue';

// 异步对数组进行赋值   解决1
let arr = reactive<number[]>([1,2,3,4,5])

// setTimeout(() => {
//   let newArr : number[] = [1,2,3,4,5] 
//   arr.push(...newArr)
//   console.log(arr);
// }, 1000);

// 异步对数组进行赋值   解决2
// type o = {
//   list: number[]
// }

// let arr = reactive<o>({
//   list:[]
// })

// setTimeout(() => {
//   let newArr : number[] = [1,2,3,4,5] 
//   arr.list = newArr
// }, 1000);

// readonly拷贝一份reactive，并且不允许修改里面的属性
const copyArr = readonly(arr)
// console.log(copyArr);

const change = () => {
  // arr[0] += 100 
  // copyArr[0] = 100

  //   如果在同一个方法里面同时改变  (ref 或者 shallowRef) 或者 (Reactive 或者 shallowReactive) 同时！！！！！！！！
  //   shallowRef , shallowReactive  不会生效 
  //   shallowRef , shallowReactive  
  //   原因是 在源码中可以体现 改变 ref , Reactive 走的时候 会调用 triggerRef 的强制转化方法


  // hobby.name = "football"
  // hobby.year = 100
  hobby.skill.firstSkill = "扣篮---Dunk"
  hobby.skill.upBask.firstBask = "扣篮---Dunk"
}

let hobby = shallowReactive({
  name:'basketball',
  year: 10,
  skill:{
    firstSkill:'变相',
    secondeSkill:"投篮",
    upBask:{
      firstBask:"三步上篮",
      secondeBask:"抛投上篮"
    }
  }
})


</script>

<style lang='scss' scoped>

</style>
